﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">   
		<title></title>
		<link rel="stylesheet" href="css/swiper-3.3.1.min.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/index.css">
	<script type="text/javascript" src="js/init.js"></script>
			<script type="text/javascript">
	     /*向上按钮*/
		 function toop(){
		 	var height = window.pageYOffset;
		 	if(height > 100){
		 		document.getElementById("top").style.display="block";
		 	}
		 	else{
		 		document.getElementById("top").style.display="none";
		 	}
		 	setTimeout('toop()',100);
		 }
		 function up(){
		 	window.location.href = "#";
		 	document.getElementById("top").style.display="none";
		 }
		</script>
	</head>
	<body class="bg-white" onload="toop()">

	<div class="main">
		<!--头部导航栏start-->
		<header class="bg-orange h100">
			<a href="index.html" class="white font22 d-ib">全部</a>
			<a href="activity_information.html" class="white font22 d-ib">活动公告</a>
			<a href="students_status.html" class="white font22 d-ib">学员动态</a>
			<a href="communication.html" class="white font22 d-ib">互动交流</a>
			<a href="activity_apply.html" class="white font22 d-ib">活动报名</a>
		</header>
		<!--头部导航栏end-->
		<!--发帖导航栏start-->
		<div class="post_menu white wid100 h80 bg-blue">
			<button class="pm_back h50 w100 font22">返回</button>
			<button class="pm_post h50 w100 bg-orange font22">发帖</button>
		</div>
		<!--发帖导航栏end-->	
		<!--帖子圈start-->
		<div class="wid88 pm_round">
			<ul>
				<li class="mb10">
					<div class="first wid100 h100">
						<img src="img/banner16.jpg"/ class="icon">
						<div class="icon_right">
							<span class="font22 fw-700">张国栋</span>
							<div class="line w250 bg-gray"></div>
							<span class="orange font18">楼主</span>	
						</div>
					</div>
					<p class="h35 time fr">
						<img src="img/clock.png" class="w40 d-ib"/>
						<span class="font20">Apr.3,1:22,PM</span>
					</p>
					<div class="second clear mt10 wid100">
						<div class="fl cl w100 hei100">
							<div class="w1 hei100 bg-gray"></div>
						</div>
						<div class="fr wid80 bg-white cr">
							<div class="cr_title font26">标题标题标题标题</div>
							<div class="img_box wid100 mt10">
								<img src="img/banner15.jpg" class="w140 h140"/>
								<img src="img/banner16.jpg" class="w140 h140"/>
								<img src="img/banner17.jpg" class="w140 h140"/>
							</div>
							<div class="cr_content font28 mt20">
								活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告
							</div>
							<div class="content_bottom_line mt20"></div>
							<div class="h80 cr_bottom wid100 mt10">
								<div class="orange font22 up upward" id="top" onclick="up()">
									<img src="img/up.png" class="w40 mr15"/>
									<span class="ml10" >TOP</span>
								</div>
								<div class="orange font22 up" style="visibility: hidden;">
									<img src="img/up.png" class="w40 mr15"/>
									<span class="ml10">TOP</span>
								</div>
								<button class="cr_comment h50 w100 orange js-cr_c font22">评论</button>
							</div>
							<div class="wid100 mt10 js-edit_comment d-n">
								<textarea class="h120 wid100 p10 font22"></textarea>
								<div class="fr mt10">
									<button class="cr_comment h50 w100 orange mr15 cancel font22">取消</button>
									<button class="cr_comment h50 w100 orange send font22">发送</button>
								</div>
							</div>	
						</div>
					</div>
				</li>
				<li class="mb10">
					<div class="first wid100 h100">
						<img src="img/banner16.jpg"/ class="icon">
						<div class="icon_right">
							<span class="font22 fw-700">张国栋</span>
							<div class="line w250 bg-gray"></div>
							<span class="orange font18">楼主</span>	
						</div>
					</div>
					<p class="h35 time">
						<img src="img/clock.png" class="w40 d-ib"/>
						<span class="font20">Apr.3,1:22,PM</span>
					</p>
					<div class="second clear mt10 wid100">
						<div class="fl cl w100 hei100">
							<div class="w1 hei100 bg-gray"></div>
						</div>
						<div class="fr wid80 bg-white cr">
							<div class="cr_title font26">标题标题标题标题</div>
							<div class="img_box wid100 mt10">
								<img src="img/banner15.jpg" class="w140 h140"/>
								<img src="img/banner16.jpg" class="w140 h140"/>
								<img src="img/banner17.jpg" class="w140 h140"/>
							</div>
							<div class="cr_content font28 mt20">
								活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告活动公告
							</div>
							<div class="content_bottom_line mt20"></div>
							<div class="h80 cr_bottom wid100 mt10">
								<div class="orange font22 up" style="visibility: hidden;">
									<img src="img/up.png" class="w40 mr15"/>
									<span class="ml10">TOP</span>
								</div>
								<button class="cr_comment h50 w100 orange js-cr_c font22">评论</button>
							</div>
							<div class="wid100 mt10 js-edit_comment d-n">
								<textarea class="h120 wid100 p10 font22"></textarea>
								<div class="fr mt10">
									<button class="cr_comment h50 w100 orange mr15 cancel font22">取消</button>
									<button class="cr_comment h50 w100 orange get font22">发送</button>
								</div>
							</div>	
						</div>
					</div>
				</li>
			</ul>	
		</div>
		<!--帖子圈end-->
	</div>	
	</body>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
	<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			/*导航栏菜单变化*/
			$('header a').eq(3).css('border','1px solid #fff');
			$('header a').click(function(){
				$('header a').css('border','1px solid transparent');
				$(this).css('border','1px solid #fff');
			});	
			
			/*动态获取cr的height*/
			!function height(){
				var h = $('.cr').height();
				$('.second').css('height',h);
			}();
			
			
			
			
			/*评论按钮*/
			$('.js-cr_c').each(function(index){
				$(this).bind('click',function(){
					$('.js-edit_comment').eq(index).slideToggle(500,function(){
						var h = $('.cr').eq(index).height();
						$('.second').eq(index).css('height',h);
					});
					
				});
				$('.cancel').eq(index).click(function(){
					$('.js-edit_comment').eq(index).slideUp(500,function(){
						var h = $('.cr').eq(index).height();
						$('.second').eq(index).css('height',h);
					});
				});
			});		
		});
		
	</script>
</html>
